<template>
  <div class="news">
    <ul>
      <li v-for="(item,i) in newsList" :key="item.id" @click="index=i" >
        <!-- <a href="#">{{ item.title }}</a> -->
        <!-- <RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}</RouterLink> -->
        
        <!-- <RouterLink :to="{path:`/news/detail/${item.id}/${item.title}/${item.content}`}"
         >{{ item.title }}</RouterLink> -->

         <!-- 只能用name, 而且params不能传数组 -->
          <button @click="showNewsDetail(item)" >查看新闻</button>
         <RouterLink :to="{ 
          name:'detail',  
          params:{
           id:item.id,
           title:item.title,
           content:item.content
         }
        }"
         >{{ item.title }}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
     <div class="news-content">
        <!-- <Detail :data="newsList[index]"></Detail> -->
        <RouterView> </RouterView>
     </div>
  </div>
</template>
<script setup lang="ts" name="News">
  import { ref,reactive } from 'vue'
  import Detail from '@/pages/Detail.vue'
  import { RouterView,RouterLink } from 'vue-router';
  import { useRouter } from 'vue-router';
  
  let index = ref(0)
  
  const newsList = reactive([
    { id: 1, title: '十种抗癌食物',content:'西兰花' },
    { id: 2, title: '如何预防癌症',content:'大蒜' },
    { id: 3, title: '癌症的早期症状',content:'苹果' },
    { id: 4, title: '癌症的早期症状',content:'香蕉' },
    { id: 5, title: '如何预防癌症',content:'菠萝' },

  ])


  const router = useRouter()
  
  interface NewsInter{
    id:number,
    title:string,
    content:string
  }
  
  function showNewsDetail(news:NewsInter){
    router.push({
      name:'detail',
      params:{
        id:news.id,
        title:news.title,
        content:news.content
      }
    })
  }

  
</script>
<style scoped>
/*新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li::marker{
  color: #64967E;
}

.news li>a{
font-size:18px;
line-height: 40px;
text-decoration:none;
color:#64967E;
text-shadow:0 0 1px rgb(0,84,0);
}
.news-content{
width: 70%;
height:90%;
border: 1px solid;
margin-top:20px;
border-radius:10px;
}
</style>
